;;(function($){
//获取localStorage里面的数据，渲染页面
var addBtnEvent = $.Callbacks();
var reduceEvent = $.Callbacks();

function renderPage(){
    var jsonArr = JSON.parse(localStorage.getItem("carts"));
    var html = "";
jsonArr.forEach((item,index)=>{
    html += `
    <li class="hover">
                        <!--ioc_xmt(信贸通),ioc_tgt(推广通),ioc_xyhy(信用会员),ioc_mqhy(名企会员),special(有特别推荐加上这个样式)-->
                        <div class="img">
                            <a href="https://www.china.cn/zhuolei/3883220667.html" target="_blank" data-scode="60440"
                                title="批量质保五年的茶餐厅桌椅款式|茶餐厅家具定做报价">
                                <img width="162" height="162" alt="批量质保五年的茶餐厅桌椅款式|茶餐厅家具定做报价"
                                    src="${item.img}">
                            </a>
                        </div>
                        <h3 class="title">
                            <a href="https://www.china.cn/zhuolei/3883220667.html" data-scode="60441"
                                title="批量质保五年的茶餐厅桌椅款式|茶餐厅家具定做报价"
                                target="_blank">批量<b>质保</b>五年的茶餐厅桌椅款式|茶餐厅<b>家具</b>定做报价</a>
                        </h3>
                        <dl class="extension_dl">
                            <dt>产品类别</dt>
                            <dd>餐桌</dd>
                            <dt>品牌</dt>
                            <dd>行一</dd>
                            <dt>适用年龄段</dt>
                            <dd>成年</dd>
                            <dt>材质</dt>
                            <dd>板式</dd>
                            <dt>适用场合</dt>
                            <dd>户外,酒店,客厅,餐厅,卧室,酒吧</dd>
                            <dt>风格</dt>
                            <dd>韩式</dd>
                        </dl>
                        <div class="main_products">主营产品：
                            <span>火锅店家具</span>
                            <span>西餐厅家具</span>
                            <span>定制高档桌椅</span>
                            <span>茶餐厅中餐厅家具</span>
                        </div>
                        <div class="extension_right" data-id = "${item.id}">
                            <span class="su-price ">
                                <font class="redpc">￥</font>${item.price}<font class="fts">.00<span>/件</span></font>
                            </span>
                            <p><a href="#">深圳市典艺坊商业家具有限公司</a></p>
                            <p>所在地：广东 深圳 </p>
                            <div class= "cartBtn" style="display:inline-block;height:32px;">
                                <span class= "reduceBtn">-</span>
                                <span class= "add_total">${item.count}</span>
                            </div>
                            <span class="inquiry_a open addcart" style="width: 30px;">+</span>
                        </div>
                    </li>
    `

})
$("#conUl").html(html);
}  
function init(){
    renderPage();
    renderCartsNum();
    bindEvent();
}
function addLocalData(){
    var id = $(this).parent().attr("data-id");
    var jsonData = JSON.parse(localStorage.getItem("carts"));
    jsonData.some((item,index)=>{
        if(item.id == id){
           item.count++;
           $(this).siblings().children(".add_total").html(item.count);
        }
    })
    //console.log()好像会有点延迟，在这里浏览器输出的是splice的jsonData
    saveData("carts",jsonData);  
    //console.log(localStorage.getItem("carts"));
    
}
function saveData(type,json){
    localStorage.setItem(type,JSON.stringify(json));
}
function renderCartsNum(){
    var jsonData = JSON.parse(localStorage.getItem("carts"));
    var total = 0;
    jsonData.forEach((item)=>{
        total +=item.count;
    })
    $("#cart").children("span").html(total);
}

function reduceLocalData(){
    var id = $(this).parent().parent().attr("data-id");
    var jsonData = JSON.parse(localStorage.getItem("carts"));
    jsonData.some((item,index)=>{
        if(item.id == id){
            item.count--;
            item.count <= 0 ? removeCartsData(id,index) : "";
           $(this).siblings(".add_total").html(item.count);
        }
    })
    //console.log()好像会有点延迟，在这里浏览器输出的是splice的jsonData
    saveData("carts",jsonData);  
    // console.log(localStorage.getItem("carts"));
}
function removeCartsData(id,index){
    if(confirm("是否确定从购物车中删除此物品")){
      $(`.extension_right[data-id=${id}]`).parent().hide(); 
      var jsonData = JSON.parse(localStorage.getItem("carts"));
      jsonData.splice(index,1);
    }
    return ;   
}
function bindEvent(){
    addBtnEvent.add([addLocalData,renderCartsNum]);
    reduceEvent.add([reduceLocalData,renderCartsNum])
    $(".addcart").on("click",addBtnEvent.fire);
    $(".reduceBtn").on("click",reduceEvent.fire)
}
$(init);
})(jQuery)
